<template>
	<view class="flex flex-col h-screen">
		<NavBarVue :title="user.nickname || ''"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full" @scrolltolower="onReachBottom">
				<view class="px-30">
					<UserBoxVue :val="user" :edit="false" class="mb-30"></UserBoxVue>
					<IncomeVue :val="user" :isAch="0"></IncomeVue>
					<BottomTabBoxVue class="mt-20" :id="id" :isAch="0" v-model="page"></BottomTabBoxVue>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import userApi from '@/apis/apiList/userApi.js';
	import UserBoxVue from '../tabbar/components/user/UserBox.vue'; //游客个人信息
	import IncomeVue from './components/Income.vue'; //收益
	import BottomTabBoxVue from '../tabbar/components/user/BottomTabBox.vue';
	import {
		jobQuery
	} from '@/config/publicFun';
	
	const id = ref('')
	const user = ref({})
	const page = ref(1)
	
	onLoad((option) => {
		id.value = option.id;
	})
	
	onShow(() => {
		getDetail();
	})
	
	const getList = (id) => {
		if (id !== -1) tab.value = id
	}
	
	const getDetail = () => {
		userApi.queryMemberInfo({
			id: id.value
		}).then(res => {
			user.value = res.data
		})
	}
	
	const onPath = (router) => {
		uni.navigateTo({
			url: router
		})
	}
	
	const onReachBottom = () => {
		page.value++
	}
</script>

<style lang="scss" scoped>
	.desc {
		color: #666666;
		font-size: 24rpx;
	}
	.box-price {
		color: #18A9FB;
		font-size: 24rpx;
		font-weight: 400;
		.num {
			font-size: 36rpx;
			font-weight: 700;
		}
	}
	.item {
		flex: 1;
		.val {
			font-size: 32rpx;
			font-weight: 700;
			color: #273A3F;
		}
		.key {
			font-size: 24rpx;
			font-weight: 400;
			color: #7290A6;
		}
	}
	.box-astrolabel {
		border-color: #fff;
		.box-title {
			.title {
				font-size: 30rpx;
				color: #333;
			}
		}
	}
	.tag {
		font-size: 24rpx;
		font-weight: 500;
		color: #9A60E3;
		background-color: #EBE4FF;
		border-color: #C8B1FB;
	}
</style>